<template>
  <div class="ticket_rule">
    <header>
      <el-button class="add-btn" type="success" @click="addShow = true">新增停车券</el-button>
    </header>

    <section>
      <el-table :data="tableData" border>
        <el-table-column label="时长(小时)" prop="parkingDuration" align="center"></el-table-column>
        <el-table-column label="金额(元)" prop="sellPrice" align="center"></el-table-column>
        <el-table-column label="有效期(天)" prop="validityDays" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteTicket(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <footer>

    </footer>

    <el-dialog title="新增停车券" :visible.sync="addShow" width="420px" :close-on-click-modal="false" :close-on-press-escape="false" :append-to-body="true">
      <AddCoupon v-if="addShow" @closeDialog="addShow = false" @refresh="getTableData" />
    </el-dialog>

  </div>
</template>

<script>
  import AddCoupon from './addCoupons.vue'

  export default {
    components: { AddCoupon },
    data() {
      return {
        addShow: false,
        seachFrom: {
          currentPage: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0
      }
    },

    mounted() {
      this.getTableData();
    },

    methods: {
      getTableData() {
        this.$axios({
          method: 'get',
          url: '/business/park-ticket-rule/page',
          params: this.seachFrom
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      deleteTicket(item) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/business/park-ticket-rule/delete',
            data: this.$qs.stringify({id: item.id})
          }).then((res) => {
            if(res.code == 200) {
              this.$message.success('删除成功');
              this.getTableData();
            } else {
              this.$message.warning('删除失败')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style scoped>
  .ticket_rule {
    padding: 14px;
  }

  header {
    height: 50px;
    width: 100%;
  }

  .add-btn {
    float: right;
    margin-right: 20px;
  }



</style>
